import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space, Select, Modal } from 'antd';
import React, { useEffect, useState, useRef } from 'react';
import ATable from './ATable'

const App: React.FC = () => {
  const onFinish = (values: any) => {
    console.log('Received values of form:', values);
  };
  const initialValues = {
    list: [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }],
    text: 123
  };
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  let [arr] = useState<any>(initialValues)
  const [form] = Form.useForm();
  const nameValue = Form.useWatch('list', form);
  useEffect(() => {
    setTimeout(() => {
      form.setFieldsValue({
        list: [{ name: 'John11222', age: 25, sel: null }, { name: 'Jane', age: 30, sel: null }],
        text: 1234,
        name: null,
        age: null
      })
    }, 2000)
  }, [])
  const handleChange = (e: any, name: any, field: any, index: any) => {
    console.log(e, name, field, 'e,name,field', index)
  }
  const print = (record: any) => {
    console.log(record, 'record')
    showModal()
    setTimeout(() => {
      form.setFieldsValue({
        list: [{ name: record.name, age: record.age, sel: '1' }, { name: record.name, age: record.age, sel: '2' }],
        text: 1234,
        name: record.name,
        age: record.age
      })
    }, 10)
  }
  useEffect(() => {
    console.log(nameValue, 'nameValue')
  }, [nameValue])

  return <div>
    <ATable print={print}></ATable>

    <Modal destroyOnClose={true} title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <Form form={form} initialValues={arr} name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
        <Form.Item
          name="text"
          label="测试"
          rules={
            [
              {
                required: true,
                message: '请输入测试!',
              },
            ]}
        >
          <Input placeholder="请输入测试..." />
        </Form.Item>
        <Form.Item
          name="name"
          label="名字1"
          rules={
            [
              {
                required: true,
                message: '请输入名字1!',
              },
            ]}
        >
          <Input placeholder="请输入名字1..." />
        </Form.Item>
        <Form.Item
          name="age"
          label="年龄1"
          rules={
            [
              {
                required: true,
                message: '请输入年龄1!',
              },
            ]}
        >
          <Input placeholder="请输入年龄1..." />
        </Form.Item>
        <Form.List name="list">
          {(fields: any[], { add, remove }: any) => (
            <>
              {fields.map((field: { name: any; }, index: any) => (
                <div>
                  <Form.Item label="Select" name={[field.name, 'sel']}>
                    <Select onChange={(e: any) => { handleChange(e, field.name, field, index) }}>
                      <Select.Option value="1">Demo1</Select.Option>
                      <Select.Option value="2">Demo2</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item
                    name={[field.name, 'name']}
                    label="版本号"
                    rules={
                      [
                        {
                          required: true,
                          message: '请输入版本号!',
                        },
                      ]}
                  >
                    <Input placeholder="请输入版本号..." />
                  </Form.Item>
                  <Form.Item
                    name={[field.name, 'age']}
                    label="请输入年龄"
                    rules={
                      [
                        {
                          required: true,
                          message: '请输入年龄',
                        },
                      ]}
                  >
                    <Input placeholder="请输入年龄..." />
                  </Form.Item>
                  {fields.length > 1 ? (
                    <MinusCircleOutlined
                      className="dynamic-delete-button"
                      onClick={() => remove(field.name)}
                    />
                  ) : null}
                </div>
              ))}
              <Form.Item>
                <Button type="dashed" onClick={() => add({ name: 'John11222', age: 25, sel: null })} block>
                  Add field
              </Button>
              </Form.Item>
            </>
          )}
        </Form.List>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Submit
        </Button>
        </Form.Item>
      </Form >
    </Modal>
  </div>
};
export default App;